<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta content="telephone=no" name="format-detection" />
    <!-- 留作将来统一添加 -->
    <TEMPLATE>${TEMPLATE}</TEMPLATE>
    <title>模板html</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/index.css">
    <link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css">
    <style type="text/css">
        #swiperList {
            background-image: url(../../image/course/shadow.png);
            background-size: calc(100vw - 40px) 32px;
            background-repeat: no-repeat;
            padding-top: 32px;
            margin: 0 40px;
            background-position: -20px 0;
        }
        .silde-content {
            background-color: #fff;
            border-radius: 10px;
        }
        .word-info {
            padding: 15px 15px 20px;
        }
        .theme-img {
            border-radius: 8px;
            height: 202px;
        }
        .record-box img {
            display: block;
            margin: 17px auto 0;
            vertical-align: top;
            width: 55px;
            height: 55px;
            border-radius: 50%;
        }
        .record-box p {
            text-align: center;
            color: #191919;
            font-size: 18px;
            font-weight: bolder;
            margin-top: 10px;
        }
        .actions {
            padding-bottom: 20px;
        }
        .actions .record-box img {
            width: 40px;
            height: 40px;
            margin-top: 0;
        }
        .actions .record-box p {
            margin: 0;
            font-weight: normal;;
            font-size: 15px;
        }
        .actions .record-box p.score {
            height: 40px;
            font-weight: bolder;
            font-size: 25px;
            color: #FD9B43;
            line-height: 40px;
        }
        .bottom-action {
            padding: 20px;
        }
        .bottom-action .action {
            padding: 0 33px;
        }
        .bottom-action .action p {
            color: #fff;
            font-size: 17px;
        }
        .show-info {
            position: relative;
            margin-top: 10px;
            background-color: rgba(255,255,255,0.7);
            border-radius: 10px;
        }
        .show-info img {
            position: absolute;
            top: -8px;
            left: 50px;
            width: 22px;
            height: 8px;
        }
        .show-info img.right {
            left: auto;
            right: 50px;
        }
        .show-info p {
            padding: 15px;
            color: #191919;
            font-size: 17px;
        }.show-info p span {
            font-weight: bolder;
        }
        .fixed-index {
            position: fixed;
            right: 0;
            left: 0;
            bottom: 0;
            height: 54px;
            z-index: 9;
            background-color: rgba(90,194,255,0.8);
        }
        .fixed-index img {
            display: block;
            margin: 0 auto;
            width: 17px;
            height: 17px;
        }
        .fixed-index p {
            text-align: center;
            color: #fff;
            font-size: 17px;
        }
    </style>
</head>
<body class="blue-bg">
    <div class="vueApp" v-cloak>
        <div class="swiper-container" id="swiperList">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="item,index in listData">
                    <div class="slide">
                        <div class="silde-content">
                            <div class="word-info">
                                <img class="theme-img" :src="item.questionPicUrl" alt="">
                                <div class="record-box">
                                    <img @click="handleRecordWord(index)" :src="isRecord ? '../../image/course/word_record.gif' : '../../image/course/record.png'" alt="">
                                    <p v-html="item.questionWord"></p>
                                </div>
                            </div>
                            <div class="actions" data-flex="box:mean">
                                <div @click="handlePlayWord(index, 1)" class="record-box">
                                    <img :src="item.playType == 1 && isPlay ? '../../image/course/pause.png' : '../../image/course/play2.png'" alt="">
                                    <p>录音播放</p>
                                </div>
                                <div @click="handlePlayWord(index, 2)" class="record-box">
                                    <img :src="item.playType == 2 && isPlay ? '../../image/course/pause.png' : '../../image/course/normal_voice.png'" alt="">
                                    <p>原音</p>
                                </div>
                                <div class="record-box">
                                    <p class="score">{{item.score || 0}}</p>
                                    <p>得分</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom-action">
            <div data-flex="main:justify" class="action">
                <p onclick="handleTranslate()">查看翻译</p>
                <p onclick="handleExample()">查看例句</p>
            </div>
            <div class="show-info" v-if="showExample || showTranslate">
                <img :class="showExample ? 'right' : ''" src="../../image/course/big_up.png" alt="">
                <p v-if="showTranslate" data-flex="box:first">
                    <span>翻译：</span>{{listData[wordIndex].questionTitle}}
                </p>
                <p v-else data-flex="box:first" style="word-break: normal;">
                    <span>例句：</span>{{listData[wordIndex].questionRemark}}
                </p>
            </div>
        </div>
        <div style="height: 54px;"></div>
        <div onclick="handleIndex()" class="fixed-index">
            <img src="../../image/course/icon_up.png" alt="">
            <p>{{wordIndex+1}}/{{listData.length}}</p>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-logic.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/audio.js"></script>
<script type="text/javascript" src="../../script/recordScore.js"></script>
<script type="text/javascript" src="../../script/localFile.js"></script>
<script type="text/javascript" src="../../script/saveFiles.js"></script>
<script type="text/javascript">
    // html 的引号一律为双引号(""),js 为单引号('')
    var USER, $S, vm;
    var playIndex = -1, pageParam = {};
    apiready = function(){
        $S = SERVICE();
        USER = USER();
        console.log(JSON.stringify(api.pageParam) + '=====pageParam');
        pageParam = api.pageParam;
        fnInit();
        // 初始化语音播放
        Audio.init();
        // 设置音频播放时间回调
        addAudioEvent();
        // 初始化录音引擎
        initEngine();
        // 初始化下载
        initLocalDownload();
        // 初始化保存s
        initSaveFile();
        // 页面消失，停止录音
        api.addEventListener({
            name: 'viewdisappear'
        }, function(ret, err){
            // 停止录音
            fnStopRecord();
            // 停止播放
            Audio.pause();
            // 移除监听事件
            Audio.removeEventListener();
        });
    };
    // 初始化
    function fnInit() {
        vm = new Vue({
            el: '.vueApp',
            data: {
                info: null,
                listData: [],
                mySwiper: null,
                wordIndex: 0,
                showExample: false,
                showTranslate: false,
                isPlay: false,
                isRecord: false
            },
            methods: {
                initSwiper: function() {
                    this.mySwiper = new Swiper('.swiper-container', {
                        autoplay: false,
                        loop: false,
                        on: {
                            slideChangeTransitionEnd: function() {
                                if(vm.isRecord == true) {
                                    // 停止录音
                                    fnStopRecord();
                                }
                                if(vm.isPlay == 2) {
                                    // 停止播放
                                    Audio.pause();
                                    playIndex = -1;
                                }
                                vm.wordIndex = this.activeIndex;
                                handlePlayWord(vm.wordIndex, 2);
                                vm.showTranslate = false;
                                vm.showExample = false;
                                vm.isRecord = false;
                                vm.listData[vm.wordIndex].isRecord = false;
                            }
                        },
                    });
                }
            }
        });
        getPageData();
    }

    // 录音完成回调
    function recordCallback(data) {
        var url = data.url, // 云端地址
            local = data.localPath, // 本地录音文件
            score = data.score; // 单词得分
        var list = deepCopy(vm.listData),
            item = list[vm.wordIndex];
        if(item.isRecord) {
            item.recordUrl = 'fs:/'+local;
            item.score = score;
            item.isRecord = false;
            vm.listData = list;
            submiteOne(vm.wordIndex, local);
        }
        vm.isRecord = false;
    }

    // 提交一个题
    function submiteOne(index, path) {
        var _path = path+'';
        var item = vm.listData[index];
        var url = 'question/compareAnswer';
        var params = {
            otherInfo: '',
            frontScore: item.score,
            answerStartTime: new Date().getTime(),
            fillAnswerStr: '',
            id: item.id
        };
        var callback = function(data) {
            var item = vm.listData[index];
            item.doStatus = data.judgeRight ? '1' : '2';
            saveFileById(data.answerRightOrErrorId, _path);
        };
        POST(url, params, callback);
    }
    // 录音动作
    function handleRecordWord(index) {
        var list = deepCopy(vm.listData),
            item = list[index];
        if(vm.isRecord) {
            // 暂停录音
            fnStopRecord();
            vm.isRecord = false;
        }else {
            // 开始录音
            vm.isRecord = true;
            fnWordRecordIdentify(item.questionWord, recordCallback);
            item.isRecord = true;
        }
        vm.listData = list;
    }

    // 播放动作
    // type 1 录音播放 2 原音播发
    function handlePlayWord(index, type) {
        var list = deepCopy(vm.listData),
            item = list[index];
        if(type == 1 && item.score === undefined) {
            fnToast('请先录音');
            return;
        }
        // 暂停
        // 暂停后 playIndex = -1，无法继续播放
        if(playIndex == index && item.playType == type) {
            Audio.pause();
            playIndex = -1;
            vm.isPlay = false;
        }else {
            playIndex = index;
            var src = type == 1 ? item.recordUrl : item.src;
            Audio.setListAndPlay([{src: src}]);
            vm.isPlay = true;
        }
        item.playType = type;
        vm.listData = list;
    }
    // index浮层
    function handleIndex() {
        var params = {
            name: 'data_list_frm',
            url: './data_list.html',
            pageParam: {
                listData: vm.listData,
                activeIndex: vm.wordIndex,
                winName: api.winName,
                frameName: api.frameName
            }
        };
        fnOpenFrame(params);
    }

    // index浮层选中回调
    function fnSetActiveIndex(index) {
        if(index != vm.wordIndex) {
            vm.mySwiper.slideTo(index, 300, true);
        }
    }
    // 翻译
    function handleTranslate() {
        vm.showTranslate = !vm.showTranslate;
        vm.showExample = false;
    }
    // 例句
    function handleExample() {
        vm.showTranslate = false;
        vm.showExample = !vm.showExample;
    }

    // 获取页面数据
    function getPageData(sign) {
        var url = 'question/findQuestionList';
        var params = {
            id: pageParam.id,
            questionTypeCode: pageParam.code
        };
        var callback = function(data) {
            var listData = data.listData;
            for(var i = 0; i < listData.length; i ++) {
                var item = listData[i];
                item.src = fileIsSave(item.id+'questionAudioUrl') || item.questionAudioUrl;
                if(item.stuAnswerResultDetailId) {
                    var src = getIsSave(item.stuAnswerResultDetailId);
                    src = 'fs:/'+ (src || '')
                    item.recordUrl = src;
                    item.score = item.stuAnswerResultDetailScoreValue;
                }
            }
            vm.listData = data.listData;
            if(vm.listData.length > 0) {
                setTimeout(function() {
                    vm.initSwiper();
                    handlePlayWord(0, 2);
                }, 100);
            }else {
                fnToast('暂时没有单词呦');
                setTimeout(function() {
                    api.closeWin();
                }, 1200)
            }
        };
        POST(url, params, callback);
    }

    // 音频播放事件回调
    function addAudioEvent() {
        var eventCallback = function(eventType, _playIndex) {
            if(eventType == 0) {
                // 一个音频播放结束
                vm.isPlay = false;
                playIndex = -1;
            }
        };
        var progressCallback = function(progress) {
            // 暂时不需要
        };
        Audio.addEvent(eventCallback, progressCallback);
    }
</script>
</html>